* {
    box-sizing: border-box;
    user-select: none;
}

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    overflow: hidden;

    #app {
        height: 100%;
    }

    color: var(--sys-text-color);
    background: var(--sys-background);
}

/*
    主题方案
    这里使用Sass的map会方便, 但是代码中就没有提示了, 所以采用最原始的方法
 */


@media (prefers-color-scheme: light) {
    :root {
        --sys-background: #fff;
        --sys-text-color: #000;
        --sys-description-text-color: #696767;

        --sys-mask-background: rgba(0,0,0,.8);

        --sys-drawer-modal-background: #fff;

        --sys-room-card-text-color: var(--sys-text-color);
        --sys-room-card-background: #f8f7f7;
        --sys-room-card-description-text-color: var(--sys-description-text-color);

        --sys-chat-system-text-color: var(--sys-description-text-color);
        --sys-chat-bubble-self-text-color: #fff;
        --sys-chat-bubble-self-background: rgb(103,80,164);
        --sys-chat-other-nickname-text-color: var(--sys-description-text-color);
        --sys-chat-bubble-other-text-color: #fff;
        --sys-chat-bubble-other-background: rgb(22,19,59);

        /* toast */
        --sys-toast-background: rgba(0, 0, 0, .7);
        --sys-toast-text-color: rgb(255, 255, 255);

    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --sys-background: rgba(0, 0, 0, .9);
        --sys-text-color: rgba(255, 255, 255, .85);
        --sys-description-text-color: rgba(255, 255, 255, .65);

        --sys-mask-background: rgba(77, 75, 75, 0.4);

        --sys-drawer-modal-background: rgb(35, 33, 33);

        --sys-room-card-text-color: var(--sys-text-color);
        --sys-room-card-background: rgba(255, 255, 255, .04);
        --sys-room-card-description-text-color: var(--sys-description-text-color);

        --sys-chat-system-text-color: var(--sys-description-text-color);
        --sys-chat-bubble-self-text-color: var(--sys-text-color);
        --sys-chat-bubble-self-background: rgb(103, 80, 164);
        --sys-chat-other-nickname-text-color: var(--sys-description-text-color);
        --sys-chat-bubble-other-text-color: var(--sys-text-color);
        --sys-chat-bubble-other-background: rgb(50, 42, 75);

        /* toast */
        --sys-toast-background: rgba(0, 0, 0, 1);
        --sys-toast-text-color: rgb(255, 255, 255);

    }
}